import React ,{useEffect}from "react";
import MenuConfig from '../config'
import * as Icon from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import {useNavigate} from 'react-router-dom'
import {useDispatch,useSelector} from 'react-redux'
import {selectMenuList,closeTab,HighlightKeyChange,selectCrumblist} from '../store/reducer/tab'
const { Sider } = Layout;
// 动态获取icon
const iconToElement = (name) => React.createElement(Icon[name])
// 处理菜单的数据
const items = MenuConfig.map((it) => {
    const child = {
        key: it.path,
        icon: iconToElement(it.icon),
        label: it.label
    }
    if (it.children) {
        child.children = it.children.map((item) => {
            return {
                key: item.path,
                label: item.label
            }
        })
    }
    return child
})
const CommonAside = ({ collapsed }) => {
    const navigate=useNavigate()
    const dispatch=useDispatch()
    const HighlightKey=useSelector((state)=>{return state.tab.HighlightKey})
    
  
    const deepMenus=(array,news=[])=>{
        // const menus=MenuConfig
        for (const item of array) {
                if(!item.children){
                    if(item.icon){
                        const child = {
                            key: item.path,
                            icon: iconToElement(item.icon),
                            label: item.label
                        }
                        news.push(child)
                    }else{
                        const child = {
                            key: item.path,
                            label: item.label
                        }
                        news.push(child)
                    }
                   
                }else{
                    if(item.icon){
                        const child = {
                            key: item.path,
                            icon: iconToElement(item.icon),
                            label: item.label
                        }
                        let node={...child,children:[]}
                        news.push(node)
                        deepMenus(item.children,node.children)
                    }else{
                        const child = {
                            key: item.path,
                            label: item.label
                        }
                        let node={...child,children:[]}
                        news.push(node)
                        deepMenus(item.children,node.children)
                    }
                }
        }
        return news
    }
    // 添加数据到store
    const setTabList=(val)=>{
        // dispatch(selectMenuList(val))
        dispatch(selectCrumblist(val))
    }
    const selectMenu=(e)=>{
        
    dispatch(HighlightKeyChange(e.key))
    let data
    MenuConfig.forEach((item)=>{
        if(item.path===e.keyPath[e.keyPath.length-1]){
            data=item
            if(e.keyPath.length>1){
                data=item.children.find((child)=>{
                    return child.path==e.key
                })
            }

        }
    })
    // setTabList({
    //     path:data.path,
    //     name:data.name,
    //     label:data.label
    // })
    setTabList({
        path:data.path,
        name:data.name,
        title:data.label
    })
    navigate(e.key)

    }
    return (
        <Sider trigger={null} collapsed={collapsed} >
            <h3 className='app-name'>{collapsed ? '后台' : '通用后台管理系统'}</h3>
            <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={HighlightKey}
                selectedKeys={HighlightKey}
                items={deepMenus(MenuConfig)}
                style={{ height: '100%' }}
                onClick={selectMenu}
            />
        </Sider>
    )
}
export default CommonAside